<template>
  <div class="container">
    <a-card>
      <div class="tenant-container">
        <!-- 租户列表 -->
        <div class="tenant-table-box">
          <div class="table-head">
            <p>租户列表</p>
            <a-button type="primary" @click="addTenant">
              <template #icon>
                <icon-plus />
              </template>
              <template #default>新增</template>
            </a-button>
          </div>
          <a-table :columns="tenantColumns" :data="tenantData">
            <template #optional="{ record }">
              <a-button type="text" @click="beforeEditTenant(record)"
                >编辑</a-button
              >
              <a-button type="text" @click="beforeDeleteTenant">删除</a-button>
            </template>
          </a-table>
        </div>
        <!-- 租户列表 结束 -->
        <!-- 租户详情 -->
        <div class="company-table-box">
          <div class="table-head">
            <p>FLP</p>
          </div>
          <a-table :columns="companyColumns" :data="companyData" />
        </div>
        <!-- 租户详情 结束 -->
      </div>
    </a-card>
    <!-- 新增租户弹窗 -->
    <a-modal
      v-model:visible="addVisible"
      title="新增"
      @cancel="
        () => {
          addVisible = false;
        }
      "
      @before-ok="handleBeforeOk"
    >
      <a-form ref="addFormRef" :model="addForm">
        <a-form-item
          field="tenantName"
          label="租户名称"
          :rules="[{ required: true, message: '租户名称不可为空' }]"
        >
          <a-input v-model="addForm.tenantName" />
        </a-form-item>
        <a-form-item
          field="initialize"
          label="初始化"
          tooltip="初始化菜单、功能权限等数据"
        >
          <a-switch
            v-model="addForm.initialize"
            checked-value="true"
            unchecked-value="false"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 新增租户弹窗 结束 -->
    <!-- 编辑租户弹窗 -->
    <a-modal
      v-model:visible="editVisible"
      @cancel="
        () => {
          editVisible = false;
        }
      "
      @before-ok="editTenant"
    >
      <template #title>编辑</template>
      <a-form ref="editFormRef" :model="editForm">
        <a-form-item
          field="tenantName"
          label="租户名称"
          :rules="[{ required: true, message: '租户名称不可为空' }]"
        >
          <a-input v-model="editForm.tenantName" />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 编辑租户弹窗 结束 -->
    <!-- 确认删除弹窗 -->
    <a-modal
      v-model:visible="deleteVisible"
      @cancel="
        () => {
          deleteVisible = false;
        }
      "
      @before-ok="deleteTenant"
    >
      <template #title>提示</template>
      <div>确认删除该项？</div>
    </a-modal>
    <!-- 确认删除弹窗 结束 -->
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';

  // 表单ref
  const addFormRef = ref();
  const editFormRef = ref();

  // 弹窗开关
  const addVisible = ref(false);
  const editVisible = ref(false);
  const deleteVisible = ref(false);

  // 删除/编辑弹窗出现之前记录点击的tenant
  // let theTenant: any = null;

  // 新增租户弹窗数据
  const addForm = reactive({
    tenantName: '',
    initialize: false,
  });

  // 编辑租户弹窗数据
  const editForm = reactive({
    tenantName: '',
  });

  // 租户列表配置
  const tenantColumns = [
    {
      title: '#',
      dataIndex: 'key',
    },
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '操作',
      slotName: 'optional',
    },
  ];

  // 租户详情列表配置
  const companyColumns = [
    {
      title: '#',
      dataIndex: 'key',
    },
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '回调地址',
      dataIndex: 'address',
    },
    {
      title: '公钥',
      dataIndex: 'publicKey',
    },
  ];

  // 租户列表数据
  const tenantData = reactive([
    {
      key: '1',
      id: '10000',
      name: '凤翎平台',
    },
  ]);

  // 租户详情列表数据
  const companyData = reactive([
    {
      key: '1',
      name: '凤翎平台',
      address: 'https://fusion.cybereng.com',
      publicKey: 'fusion',
    },
  ]);

  // 打开新增弹窗之前
  const addTenant = () => {
    addFormRef.value.resetFields();
    addVisible.value = true;
  };
  // 确认新增 调用接口
  const handleBeforeOk = async () => {
    const result = await addFormRef.value.validate();
    if (result) {
      return false;
    }
    // TODO 调用api
    addVisible.value = false;
    return true;
  };
  // 打开删除弹窗之前
  const beforeDeleteTenant = () => {
    // theTenant = record;
    deleteVisible.value = true;
  };
  // 确认删除 调用接口
  const deleteTenant = async () => {
    // TODO 调用api
    return true;
  };
  // 打开编辑弹窗之前
  const beforeEditTenant = (record: any) => {
    editForm.tenantName = record.name;
    // theTenant = record;
    editVisible.value = true;
  };
  // 确认编辑 调用接口
  const editTenant = async () => {
    const result = await editFormRef.value.validate();
    if (result) {
      return false;
    }
    // TODO 调用接口
    return true;
  };
</script>

<style scoped>
  .container {
    width: 100%;
    padding: 0 20px 20px;
  }

  .tenant-container {
    display: flex;
    width: 100%;
  }

  .tenant-table-box {
    width: 48%;
  }

  .company-table-box {
    width: 48%;
    margin-left: 2%;
  }

  .table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>
